<template>
    <div>
        <div>
            <p>搜索</p>
            <el-input 
                class="search-bar"
                placeholder="请输入搜索" 
                v-model="msg.searchText" 
                clearable
                @keyup.enter.native="postSearchText"
                >
            </el-input>
            <el-button-group style="margin-top:-1px;">
                <el-button 
                    v-if="!seniorToggle"
                    type="primary" 
                    @click="postSearchText"
                    icon="el-icon-search">
                    </el-button>
                <el-button 
                    :type="seniorToggle === true ? 'primary' : 'info'"
                    @click="seniorToggleHandle">
                    高级
                    <i class=" el-icon--right" 
                        :class="seniorToggle === true ? 'el-icon-arrow-up' :'el-icon-arrow-down'"></i>
                </el-button>
            </el-button-group>
        </div>

        <hr>

        <div v-if="seniorToggle">
            <div>
                <p>时间选择</p>
                <DataDatePicker :msg="msg"/>
            </div>

            <hr>

            <div>
                <p>范围选择</p>
                <DataRegion :baseMsg="baseMsg" :msg="msg"/>
            </div>
            
            <hr>

            <div>
                <p>标签选择</p>
                <DataTags :msg="msg"/>
            </div>

            <hr>

            <el-button-group>
                <el-button @click="sendCondition" type="primary">确定</el-button>
                <el-button @click="resetCondition">重置</el-button>
            </el-button-group>
        </div>
    </div>
</template>

<script>
import DataDatePicker from './dataCondition/DataDatePicker.vue'
import DataRegion from './dataCondition/DataRegion.vue'
import DataTags from './dataCondition/DataTags.vue'
export default {
    components:{
        DataDatePicker,
        DataRegion,
        DataTags
    },
    props:[
        'msg',
        'baseMsg'
    ],
    data(){
        return {
            seniorToggle:false
        }
    },
    methods:{
        postSearchText(){
            // 第三个参数，表示高级功能开关
            if(this.msg.searchText)this.$emit('pageSearch', true, this.seniorToggle)
        },
        sendCondition(){
            this.$emit('pageClick', true)
        },
        resetCondition(){
            this.$emit('pageReset', true)
        },
        seniorToggleHandle(){
            this.seniorToggle = !this.seniorToggle
        }
    }
}
</script>

<style scoped>
.search-bar{
    width:50%;
}
/* .search-bar .el-button.el-button--default{
    border:1px solid red;
    margin-left:1px;
} */
</style>
